import { useState, useEffect, setState } from "react";
import { Button, Image } from "antd";
import "@/styles/index.css";
import Banner from "@/components/Banner.jsx";
import PIC01 from "assets/pic01.jpg";
import PIC0101 from "assets/pic01-01.jpg";
import PIC02 from "assets/pic02.jpg";
import PIC0201 from "assets/pic02-01.jpg";
import PIC03 from "assets/pic03.jpg";
import PIC0301 from "assets/pic03-01.jpg";
import PIC04 from "assets/pic04.jpg";
import PIC0401 from "assets/pic04-01.jpg";
import PIC05 from "assets/pic05.jpg";
import PIC0501 from "assets/pic05-01.jpg";
import PIC06 from "assets/pic06.jpg";
import { getHome } from "@/utils/request/index";

const Home = () => {
  const [dataHome, setDataHome] = useState({
    banner: [],
    feature: [],
    news: [],
    product: [],
    homeProduct: [],
    about: {
      title: "",
      content: "",
    },
  });

  function loadGetHome() {
    getHome()
      .then((res) => {
        console.log(res);
        setDataHome({
          banner: res.banner,
          feature: res.feature,
          news: res.news,
          homeProduct: res.homeProduct,
          product: res.product,
          about: res.about,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }
  useEffect(() => {
    loadGetHome();
  }, []);

  return (
    <>
      <Banner banner={dataHome.banner} product={dataHome.homeProduct} />

      <div id="product" className="container">
        <div className="title">
          <h1 className="chinese">产品展示</h1>
          <h1 className="english">OUR PRODUCTS</h1>
        </div>
        <div className="content clearfix">
          <div className="left">
            <div className="top clearfix">
              <a className="householdUse" href="#">
                <Image src={PIC01} alt="" />
                <Image className="hoverShow" src={PIC0101} alt="" />
              </a>
              <a className="householdStorage" href="#">
                <Image src={PIC02} alt="" />
                <Image className="hoverShow" src={PIC0201} alt="" />
              </a>
            </div>
            <div className="bottom clearfix">
              <a className="homeAccessories" href="#">
                <Image src={PIC03} alt="" />
                <Image className="hoverShow" src={PIC0301} alt="" />
              </a>
              <a className="kitchenCatering" href="#">
                <Image src={PIC04} alt="" />
                <Image className="hoverShow" src={PIC0401} alt="" />
              </a>
            </div>
          </div>
          <a className="right" href="#">
            <Image src={PIC05} alt="" />
            <Image className="hoverShow" src={PIC0501} alt="" />
          </a>
        </div>
      </div>
      <div id="aboutUs">
        <div>
          <h1>{dataHome.about.title}</h1>
          <p>{dataHome.about.content}</p>
          <a href="aboutUs">READ MORE</a>
        </div>
      </div>
      <div id="news" className="container">
        <div className="title">
          <h1 className="chinese">新闻动态</h1>
          <h1 className="english">NEWS CENTER</h1>
        </div>
        <div className="content clearfix">
        {dataHome.news.map((item, index) => {
          return (
              <div key={index}>
                <a href="#">{index === 0 ? <img src={dataHome.news[0].url} alt="pic06" /> : '' } </a>
                <ul>
                  <li>
                    <a href="#">
                      <span className="color15bded">[{item.type}]</span>
                      {item.title}
                    </a>
                    <span className="time">{item.createTime}</span>
                  </li>
                </ul>
              </div>
          );
        })}
        </div>
        <div className="clearFloat"></div>
      </div>
    </>
  );
};

export default Home;
